<script>
    import Card from "../Wrapper/Bootstrap/Card.svelte";
    import CardBody from "../Wrapper/Bootstrap/CardBody.svelte";
</script>

<Card>
    <CardBody>
        <p class="mb-3">Using Storage <strong>6854.45 MB </strong>of 8 GB</p>
        <div class="progress progress-separated mb-3">
            <div class="progress-bar bg-primary" role="progressbar"
                 style="width: 44%"></div>
            <div class="progress-bar bg-info" role="progressbar" style="width: 19%"></div>
            <div class="progress-bar bg-success" role="progressbar" style="width: 9%"></div>
        </div>
        <div class="row">
            <div class="col-auto d-flex align-items-center pe-2">
                <span class="legend me-2 bg-primary"></span>
                <span>Regular</span>
                <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">915MB</span>
            </div>
            <div class="col-auto d-flex align-items-center px-2">
                <span class="legend me-2 bg-info"></span>
                <span>System</span>
                <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">415MB</span>
            </div>
            <div class="col-auto d-flex align-items-center px-2">
                <span class="legend me-2 bg-success"></span>
                <span>Shared</span>
                <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">201MB</span>
            </div>
            <div class="col-auto d-flex align-items-center ps-2">
                <span class="legend me-2"></span>
                <span>Free</span>
                <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">612MB</span>
            </div>
        </div>
    </CardBody>
</Card>

